<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1>总值：{{res}} </h1>
        <!-- 2. 监听自定义事件 calcclick -->
        <com @calc-click="calc"></com>
        <com @calc-click="calc"></com>
        <com @calc-click="calc"></com>
    </div>
</body>

<template id="com">
    <div style="border: 1px solid red; padding: 10px;">
        <button @click="reduce"> - </button> &#X3000;
        <span> {{count}} </span> &#X3000;
        <button @click="add"> + </button>
    </div>
</template>

<!-- 
    父子组件通讯的两个方法：
    父传子: 使用的是 props 进行值的传递
    子传父: 通过自定义事件进行传递
 -->

<script>


    const com = {
        template: '#com',
        data() {
            return {
                count: 0
            }
        },
        methods: {
            reduce() {
                this.count--
                this.$emit('calc-click', -1)
            },
            add() {
                this.count++
                // 3. 使用 $emit 来触发自定义事件，并携带参数
                this.$emit('calc-click', 1)
            }
        }
    }


    const app = {
        data() {
            return {
                res: 0
            }
        },
        methods: {
            // 1. 在父组件中定义一个接收子组件传递参数的方法
            calc(val) {
                // console.log(val);
                this.res += val
            }
        },
        components: {
            com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>